<!-- 面试通知 - 废弃 -->
<template>
  <div>
    <div class="eda-main-title">
      <div class="top-icon">
        <img src="../../../assets/img/personnelImage/创建流程图.png"/>
      </div>
      <div class="top-title">
        流程:创建 - 面试安排流程 - 创建
      </div>
      <div class="top-operate">
        <el-button type="primary">提交</el-button>
        <el-button type="primary">取消</el-button>
      </div>
    </div>

    <div class="eda-main">
      <div class="main-middle">
        <el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="150px"
                 size="default" @submit.prevent>
          <div class="table-container">
            <table class="table-layout">
              <tbody>
              <tr>
                <td class="table-cell" colspan="4">
                  <div class="static-content-item">
                    <div>| 面试通知信息</div>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="table-cell">
                  <div class="static-content-item">
                    <div>面试负责人</div>
                  </div>
                </td>
                <td class="table-cell">
                  <el-form-item label="" label-width="0" prop="msname" class="label-right-align">
                    <el-select v-model="formData.msname" class="full-width-input" clearable filterable
                               allow-create default-first-option automatic-dropdown remote>
                      <el-option v-for="(item, index) in msnameOptions" :key="index" :label="item.value"
                                 :value="item.value" :disabled="item.disabled"></el-option>
                    </el-select>
                  </el-form-item>
                </td>
                <td class="table-cell">
                  <div class="static-content-item">
                    <div>岗位</div>
                  </div>
                </td>
                <td class="table-cell">
                  <el-form-item label="" label-width="0" prop="gwbh" class="label-right-align">
                    <el-select v-model="formData.gwbh" class="full-width-input" clearable>
                      <el-option v-for="(item, index) in gwbhOptions" :key="index" :label="item.value"
                                 :value="item.value" :disabled="item.disabled"></el-option>
                    </el-select>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="table-cell">
                  <div class="static-content-item">
                    <div>申请日期</div>
                  </div>
                </td>
                <td class="table-cell">
                  <el-form-item label="" label-width="0" prop="sqrq" class="label-right-align">
                    <el-date-picker v-model="formData.sqrq" type="date" class="full-width-input"
                                    format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable></el-date-picker>
                  </el-form-item>
                </td>
                <td class="table-cell">
                  <div class="static-content-item">
                    <div>申请时间</div>
                  </div>
                </td>
                <td class="table-cell">
                  <el-form-item label="" label-width="0" prop="sqsj" class="label-right-align">
                    <el-time-picker v-model="formData.sqsj" class="full-width-input" format="HH:mm:ss"
                                    value-format="HH:mm:ss" clearable></el-time-picker>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="table-cell">
                  <div class="static-content-item">
                    <div>安排面试日期</div>
                  </div>
                </td>
                <td class="table-cell">
                  <el-form-item label="" label-width="0" prop="aprq" class="label-right-align">
                    <el-date-picker v-model="formData.aprq" type="date" class="full-width-input"
                                    format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable></el-date-picker>
                  </el-form-item>
                </td>
                <td class="table-cell">
                  <div class="static-content-item">
                    <div>安排面试时间</div>
                  </div>
                </td>
                <td class="table-cell">
                  <el-form-item label="" label-width="0" prop="apsj" class="label-right-align">
                    <el-time-picker v-model="formData.apsj" class="full-width-input" format="HH:mm:ss"
                                    value-format="HH:mm:ss" clearable></el-time-picker>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="table-cell">
                  <div class="static-content-item">
                    <div>面试形式</div>
                  </div>
                </td>
                <td class="table-cell">
                  <el-form-item label="" label-width="0" prop="msxs" class="label-right-align">
                    <el-select v-model="formData.msxs" class="full-width-input" clearable>
                      <el-option v-for="(item, index) in msxsOptions" :key="index" :label="item.value"
                                 :value="item.value" :disabled="item.disabled"></el-option>
                    </el-select>
                  </el-form-item>
                </td>
                <td class="table-cell">
                  <div class="static-content-item">
                    <div>面试阶段</div>
                  </div>
                </td>
                <td class="table-cell">
                  <el-form-item label="" label-width="0" prop="msjd" class="label-right-align">
                    <el-select v-model="formData.msjd" class="full-width-input" clearable>
                      <el-option v-for="(item, index) in msjdOptions" :key="index" :label="item.value"
                                 :value="item.value" :disabled="item.disabled"></el-option>
                    </el-select>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="table-cell">
                  <div class="static-content-item">
                    <div>说明</div>
                  </div>
                </td>
                <td class="table-cell" colspan="3">
                  <el-form-item label="" label-width="0" prop="sm" class="label-right-align">
                    <el-input type="textarea" v-model="formData.sm" rows="3"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="table-cell" colspan="4">
                  <div class="static-content-item">
                    <div>| 候选人信息</div>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="table-cell">
                  <div class="static-content-item">
                    <div>候选人姓名</div>
                  </div>
                </td>
                <td class="table-cell">
                  <el-form-item label="" label-width="0" prop="hname" class="label-right-align">
                    <el-select v-model="formData.hname" class="full-width-input" clearable>
                      <el-option v-for="(item, index) in hnameOptions" :key="index" :label="item.value"
                                 :value="item.value" :disabled="item.disabled"></el-option>
                    </el-select>
                  </el-form-item>
                </td>
                <td class="table-cell">
                  <div class="static-content-item">
                    <div>手机号码</div>
                  </div>
                </td>
                <td class="table-cell">
                  <el-form-item label="" label-width="0" prop="hphone" class="label-right-align">
                    <el-input v-model="formData.hphone" type="text" clearable></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="table-cell">
                  <div class="static-content-item">
                    <div>性别</div>
                  </div>
                </td>
                <td class="table-cell">
                  <el-form-item label="" label-width="0" prop="psex" class="label-right-align">
                    <el-select v-model="formData.psex" class="full-width-input" clearable>
                      <el-option v-for="(item, index) in psexOptions" :key="index" :label="item.value"
                                 :value="item.value" :disabled="item.disabled"></el-option>
                    </el-select>
                  </el-form-item>
                </td>
                <td class="table-cell">
                  <div class="static-content-item">
                    <div>邮箱</div>
                  </div>
                </td>
                <td class="table-cell">
                  <el-form-item label="" label-width="0" prop="peamil" class="label-right-align">
                    <el-input v-model="formData.peamil" type="text" clearable></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="table-cell">
                  <div class="static-content-item">
                    <div>出生年月</div>
                  </div>
                </td>
                <td class="table-cell">
                  <el-form-item label="" label-width="0" prop="bir" class="label-right-align">
                    <el-date-picker v-model="formData.bir" type="date" class="full-width-input"
                                    format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable></el-date-picker>
                  </el-form-item>
                </td>
                <td class="table-cell">
                  <div class="static-content-item">
                    <div>工作经验</div>
                  </div>
                </td>
                <td class="table-cell">
                  <el-form-item label="" label-width="0" prop="gzjy" class="label-right-align">
                    <el-select v-model="formData.gzjy" class="full-width-input" clearable>
                      <el-option v-for="(item, index) in gzjyOptions" :key="index" :label="item.value"
                                 :value="item.value" :disabled="item.disabled"></el-option>
                    </el-select>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="table-cell">
                  <div class="static-content-item">
                    <div>候选人简历</div>
                  </div>
                </td>
                <td class="table-cell" colspan="3">
                  <el-form-item label="" label-width="0" prop="wjjl" class="label-right-align">
                    <el-upload :file-list="wjjlFileList" :headers="wjjlUploadHeaders" :data="wjjlUploadData"
                               list-type="picture-card" show-file-list :limit="3"> <template #default><i
                        class="el-icon-plus"></i></template></el-upload>
                  </el-form-item>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      formData: {
        msname: "",
        gwbh: "",
        sqrq: null,
        sqsj: null,
        aprq: null,
        apsj: null,
        msxs: "",
        msjd: "",
        sm: "",
        hname: "",
        hphone: "",
        psex: "",
        peamil: "",
        bir: null,
        gzjy: "",
        wjjl: null,
      },
      rules: {
        peamil: [{
          pattern: /^([-_A-Za-z0-9.]+)@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/,
          trigger: ['blur', 'change'],
          message: ''
        }],
      },
      msnameOptions: [{
        "label": "select 1",
        "value": 1
      }, {
        "label": "select 2",
        "value": 2
      }, {
        "label": "select 3",
        "value": 3
      }],
      gwbhOptions: [{
        "label": "select 1",
        "value": 1
      }, {
        "label": "select 2",
        "value": 2
      }, {
        "label": "select 3",
        "value": 3
      }],
      msxsOptions: [{
        "label": "select 1",
        "value": 1
      }, {
        "label": "select 2",
        "value": 2
      }, {
        "label": "select 3",
        "value": 3
      }],
      msjdOptions: [{
        "label": "select 1",
        "value": 1
      }, {
        "label": "select 2",
        "value": 2
      }, {
        "label": "select 3",
        "value": 3
      }],
      hnameOptions: [{
        "label": "select 1",
        "value": 1
      }, {
        "label": "select 2",
        "value": 2
      }, {
        "label": "select 3",
        "value": 3
      }],
      psexOptions: [{
        "label": "select 1",
        "value": 1
      }, {
        "label": "select 2",
        "value": 2
      }, {
        "label": "select 3",
        "value": 3
      }],
      gzjyOptions: [{
        "label": "select 1",
        "value": 1
      }, {
        "label": "select 2",
        "value": 2
      }, {
        "label": "select 3",
        "value": 3
      }],
      wjjlFileList: [],
      wjjlUploadHeaders: {},
      wjjlUploadData: {},
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    submitForm() {
      this.$refs['vForm'].validate(valid => {
        if (!valid) return
        //TODO: 提交表单
      })
    },
    resetForm() {
      this.$refs['vForm'].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/css/personnelCss/EDemandApp";
</style>